<template>
   <div class='bgc'>
   <div class='border'>
<div class="container">
      <div class='tip'><Tooltip max-width="500"  content="学生老师的姓名与密码为：黄剑群和666666,管理员为admin和666666，本提示用于辅助登录，本系统不支持游客登陆">
        <span><Icon type="ios-information-circle-outline"/> 提示</span>
    </Tooltip></div>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="userName">
            <Input  type="text" v-model="formInline.userName" placeholder="输入你的姓名" > 
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="userpwd">
            <Input  v-model="formInline.userpwd" placeholder="输入你的密码">
                <Icon type="ios-lock-outline" slot="prepend" ></Icon>
            </Input>
        </FormItem></br> 
      <RadioGroup v-model="role">
        <Radio label="学生"></Radio>
        <Radio label="老师"></Radio>
        <Radio label="管理员"></Radio>
    </RadioGroup>
    
        <FormItem>
           <br/>
           <Button class='Size' icon="md-key" type="primary" size='large' @click="handleSubmit1('formInline')">登录</Button>
        </FormItem>
    </Form>
  
   </div>
   </div>
     <div id="canvas"></div>
    </div>
</template>
<script>
import { CanvasBackground } from '@/utils/comm/canvas_bg.js'
export default {
  data() {
    return {
      role:'学生',
      formInline: {
        userName: "",
        userpwd: ""
      },
      formCustom:{
         teacherPwd: '',
         teacherName: ''
                },
      ruleInline: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        userpwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码长度不少于六位数",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
      var bg = new CanvasBackground({
            canvasContainerID: "canvas",
            circleColor: "rgba(255,128,0,1)",
            lineColor: "rgba(255,159,64,1)",
            canvasOpacity: 0.35
        });
  },
  methods: {
    handleSubmit1(name) {
     if(this.role=='学生'){
        this.$axios({
        method: "post",
        url: "http://"+this.urlpath+"/login",
        data:this.formInline
      }).then(res => {
        if (res.data.status =="oklogin") {
          this.$router.push("/studentPage");
          sessionStorage.setItem("studentName", res.data.studentName);
        } else if (res.data.status == "stoplogin") {
          this.$Message.error("用户名或密码错误!");
        } else {
          this.$Message.error("用户名或密码错误!");
        }
      });

     }else if(this.role==='老师'){
          this.formCustom.teacherName=this.formInline.userName
          this.formCustom.teacherPwd=this.formInline.userpwd
           this.$axios({
                   method:"post",
                   url:"http://"+this.urlpath+"/Teacherlogin",
                   data:this.formCustom
               }).then((res)=>{
                   if(res.data.status=="oklogin"){
                    sessionStorage.setItem('teacherName',res.data.teacherName)
                    this.$router.push({
                        path:'/teacherPage',
                        query:{
                            teacherName:res.data.teacherName
                        }
                    })
                  
                   }
                   else if(res.data=="stoplogin"){
                       this.$Message.error('用户名或密码错误!') 
                   }
                   else{
                        this.$Message.error('用户名或密码错误!') 
                   }                  
               })  
     }else{
           if(this.formInline.userName=='admin'&&this.formInline.userpwd=='666666'){
              sessionStorage.setItem('admin','admin')
             this.$router.push({
                        path:'/adminLogin'
                    })
           }else{
               this.$Message.error('用户名或密码错误!') 
           }
     }
    }
  }
}
</script>


<style lang="scss" scoped>
.container {
   width: 200px;
   height: 150px;
  background-color: #f8f8f9;
  z-index: 60;
  
}
.border{
    margin-top: 160px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    background-color: #f8f8f9;
    border: solid 1px #dcdee2;
      z-index: 60;
}
.bgc{
  display: flex;
  justify-content: center;
  background-color: #fff;
  background-image: url('../../static/images/4.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
  width: 100%;
}
.Size{
  width: 180px;
}
.tip{
  opacity: 0.75;
  z-index: 100;
  position: absolute;
  top: 180px;
  left: 55%;
}
#canvas {
    opacity: 0.6;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: 30
}



</style>

